<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>五项排名</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="css/cui.css"/>
    <link rel="stylesheet" href="css/lib.css"/>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>

<!-- 头部 -->
<section id="hd">
    <div class="hdl"><a onclick="history.back()" class="a-back"></a></div>
    <h3>五项排名</h3>
</section>
<!-- 头部 end-->


<!-- 主内容 -->
<section id="bd" class="dn">

    <div class="m-tab3">
        <ul class="TAB_CLICK" id=".tabshow1">
            <li class="on"><a href="javascript:void(0);"><span>本市排名</span></a></li>
            <li><a href="javascript:void(0);"><span>本校排名</span></a></li>
        </ul>
    </div>
    <div  class="tabshow1">
        <ul class="ul-list6">
            <li v-for="rank,index in schoolRank">
                <a class="pic" ><img src="img/pic1.png" alt=""></a>
                <!--todo topten 无法获取学生姓名 没有学生详情页面-->
                <h3 v-if="index<3"><a><span><i :class="'icon'+(index+1)"></i></span>{{rank.Rank}} {{rank.StudentName}}</a></h3>
                <h3 v-else><a><span>&nbsp;&nbsp;{{rank.Rank}}</span> {{rank.StudentName}}</a></h3>
            </li>
        </ul>
    </div>
    <div  class="tabshow1 dn">
        <ul class="ul-list6">
            <li v-for="rank,index in cityRank">
                <a class="pic"><img src="img/pic1.png" alt=""></a>
                <h3 v-if="index<3"><a><span><i :class="'icon'+(index+1)"></i></span>{{rank.Rank}} {{rank.StudentName}}</a></h3>
                <h3 v-else><a><span>&nbsp;&nbsp;{{rank.Rank}}</span> {{rank.StudentName}}</a></h3>
            </li>
        </ul>
    </div>

</section>
<!-- 主内容 end-->


<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="js/lib.js"></script>
<script src="http://cdn.bootcss.com/vue/2.2.6/vue.min.js"></script>
<script src="http://cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>
<script src="js/axios-config.js"></script>
<script>
    var Rank=new Vue({
        el:'#bd',
        data:{
            cityRank:{

            },
            schoolRank:{

            }
        },
        beforeCreate:function () {
            var _=this;
            axios.topten('/',{
                type:1
            }).then(function (res) {
                if(res.data.Code===2){
                    location.href='login.html?refer='+location.href;
                }else if(res.data.Code===0){
                    _.cityRank=res.data.List
                }
            });
            axios.topten('/',{
                type:2
            }).then(function (res) {
                if(res.data.Code===2){
                    location.href='login.html?refer='+location.href;
                }else if(res.data.Code===0){
                    _.schoolRank=res.data.List
                }
            })
        },
        mounted:function () {
            $('#bd').show()
        }
    })
</script>


</body>
</html>